<template>
    <h-section title="过程文档" collapse>
        <div class="section-body">
            <a-row :gutter="48">
                <a-col span="24">
                    <flexbox v-for="item of Object.keys(fileOptions)" :key="item" class="file-cont">
                        <flexbox justify="center" class="file-cont-title">
                            <span> {{ item }}</span>
                            <a-tooltip title="下载全部">
                                <DownloadOutlined v-if="item === '更新包'" style="margin-left: 6px" @click="handleDownAll(item)" />
                            </a-tooltip>
                        </flexbox>
                        <flexbox-item>
                            <flexbox justify="space-between" :data-title="item" :class="['file-cont-body', fileOptions[item].disabled ? 'disabled-item' : '']">
                                <file-cell :border="false" :fileList="fileOptions[item].files" :span="24" :detail="detail" v-if="disabled || fileOptions[item].disabled" />
                                <upload-cell style="width: 100%; margin-top: 0" :fileParams="{ connectType: item, type: 1, systemName: detail.systemName, versionNumber: detail.versionNumber }" :fileList="fileOptions[item].files" :detail="detail" @valueChange="fileChange($event, item)" :placeholder="item === '更新包' ? '支持：.rar .zip  .jpg...' : ''" v-else />
                            </flexbox>
                        </flexbox-item>
                    </flexbox>
                </a-col>
            </a-row>
        </div>
    </h-section>
</template>

<script lang="ts">
import { useDownFile } from '@/hooks/common/useFile';
import { FileCell, UploadCell } from '@/components';
import { FileItem } from '@/types';
import { DownloadOutlined } from '@ant-design/icons-vue';
import { defineComponent, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    name: 'BaseInfo',
    components: {
        FileCell,
        UploadCell,
        DownloadOutlined
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false },
        hasAuth: { type: Boolean, default: false },
        isShowHistoryDetail: { type: Boolean, default: false },
        stepStatus: { type: String, default: '' }
    },
    emits: ['save'],
    setup(props, { emit }) {
        const { downFile } = useDownFile();
        const state = reactive<any>({
            form: {
                files: []
            },
            // 所有文件集合
            fileOptions: {}
        });
        // 初始化，并分类
        const initFile = () => {
            let fileOptions: any = null;
            if (+props.detail.processType === 1) {
                fileOptions = {
                    发起需求: { files: [], disabled: true },
                    需求受理信息: { files: [], disabled: true },
                    产品文档: { files: [], disabled: true },
                    需求文档: { files: [], disabled: false, stage: 1 },
                    评审记录: { files: [], disabled: false, stage: 2 },
                    更新包: { files: [], disabled: false, stage: 5 },
                    测试报告: { files: [], disabled: false, stage: 6 },
                    验收交付: { files: [], disabled: false, stage: 7 }
                };
            } else {
                fileOptions = {
                    发起需求: { files: [], disabled: true },
                    需求受理信息: { files: [], disabled: true },
                    产品文档: { files: [], disabled: true },
                    需求文档: { files: [], disabled: false },
                    排期: { files: [], disabled: false },
                    评审记录: { files: [], disabled: false, stage: 2 },
                    测试报告: { files: [], disabled: false, stage: 6 },
                    验收交付: { files: [], disabled: false, stage: 7 },
                    更新包: { files: [], disabled: false, stage: 6 }
                };
            }
            Object.keys(fileOptions).forEach((key) => {
                if (props.detail.processStatus) {
                    fileOptions[key].disabled = fileOptions[key].disabled || fileOptions[key].stage > props.detail.processStatus;
                } else {
                    if (fileOptions[key].stage) {
                        fileOptions[key].disabled = true;
                    }
                }
            });

            state.form.files.forEach((item) => {
                if (fileOptions[item.connectType]) {
                    item.disabled = !props.hasAuth;
                    fileOptions[item.connectType].files = fileOptions[item.connectType].files || [];
                    fileOptions[item.connectType].files.push(item);
                }
            });
            state.fileOptions = fileOptions;
        };
        // 监听文件删除等操作
        const fileChange = (fileList: FileItem[], connectType: string) => {
            const files = state.form.files.filter((item) => item.connectType !== connectType);
            state.form.files = [...files, ...fileList];
            // 修改文档后立即保存
            emit('save', 8);
        };
        const handleDownAll = (item) => {
            const files = state.fileOptions[item].files;
            files.forEach((item) => {
                downFile(item, !!props.detail?.pmpTestInformationDTO);
            });
        };
        const init = () => {
            state.form.files = props.detail.files;
            initFile();
        };
        init();
        watch(
            () => props.detail.files,
            (n, o) => {
                if (JSON.stringify(n) !== JSON.stringify(o)) {
                    init();
                }
            },
            { deep: true }
        );
        return {
            ...toRefs(state),
            handleDownAll,
            fileChange
        };
    }
});
</script>
<style lang="less" scoped>
.disabled-item {
    background: #fafafa !important;
}
.file-cont {
    background: #eaf5fe;
    border: 1px solid #eee;
    & + .file-cont {
        border-top: none;
    }
    &-title {
        width: 140px;
        height: 100%;
    }
    &-edit {
        width: 50%;
        height: 100%;
        padding: 8px;
        font-size: 14px;
        .canEdit {
            cursor: pointer;
            color: @primary-color;
        }
        .disabledEdit {
            cursor: not-allowed;
            color: @disable-font-color;
        }
        .opinion-cont {
            white-space: pre-wrap;
            color: @error-color;
        }
    }
    &-body {
        position: relative;
        min-height: 56px;
        background: #fff;
        border-left: 1px solid #eee;
        padding: 16px;
        ::v-deep(.file-name-item) {
            .title-cont-item {
                max-width: 380px !important;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}
</style>

